import { useEffect, useRef } from "react"
import * as echarts from 'echarts'
export const EchartColumn = ({ title }) => {
  // 保证图表挂载的dom节点可用
  const chartRef = useRef(null)
  useEffect(() => {
    const myChart = echarts.init(chartRef.current)
    const option = {
      title: {
        text: title
      },
      xAxis: {
        type: 'category',
        data: ['Vue', 'React', 'Angular']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [30, 10, 50],
          type: 'bar'
        }
      ]
    }

    option && myChart.setOption(option)
    // 返回一个副作用清理函数,清除echart实例和挂载的dom节点
    return () => {
      if (myChart) {
        myChart.dispose()
      }
    }
  }, [title])

  return (
    <div ref={chartRef} style={{ width: '500px', height: '400px' }} >

    </div>)
}